<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>11淘宝精品案例</title>
</head>
    <style>
        *{
            margin: 0;
            padding: 0;
            font-size: 12px;
        }
        a{
            text-decoration: none;
        }
        ul{
            list-style: none;
        }
        body{
            display: block;
        }
        .wrapper{
            margin: 150px auto;
            width: 300px;
            height: 255px;
        }
        #left,#right{
            float: left;
        }
        #left li,#right li{
            width: 48px;
            height: 28px;
            background: #FFE4E1 repeat-x;
        }
        #left li a,#right li a{
            display: block;
            width: 48px;
            height: 27px;
            border-bottom: 1px solid pink;
            line-height: 27px;
            text-align: center;
            color: black;
        }
        #left li a:hover,#right li a:hover{
            background-image: url(img/bgr.jpg);
        }
        #center {
            float: left;
            border-left: 1px solid pink;
            border-right: 1px solid pink;
            border-bottom: 1px solid pink;
            height: 251px;
            width: 200px;
            overflow: hidden;
        }
        #center li{
            /* float: left; */
            /* background-color: green;;     */
        }
    </style>
<body>

    <div class="wrapper">
        <ul id="left">
            <li><a href="#">女靴</a></li>
            <li><a href="#">雪地靴</a></li>
            <li><a href="#">冬裙</a></li>
            <li><a href="#">呢大衣</a></li>
            <li><a href="#">毛衣</a></li>
            <li><a href="#">棉服</a></li>
            <li><a href="#">女裤</a></li>
            <li><a href="#">羽绒服</a></li>
            <li><a href="#">牛仔裤</a></li>
        </ul>
        <ul id="center">
            <li><a href="#"><img src="img/女靴.jpg" width="200" height="253px" /></a></li>
            <li><a href="#"><img src="img/雪地靴.jpg" width="200" height="253px" /></a></li>
            <li><a href="#"><img src="img/冬裙.jpg" width="200" height="253px" /></a></li>
            <li><a href="#"><img src="img/呢大衣.jpg" width="200" height="253px" /></a></li>
            <li><a href="#"><img src="img/毛衣.jpg" width="200" height="253px" /></a></li>
            <li><a href="#"><img src="img/棉服.jpg" width="200" height="253px" /></a></li>
            <li><a href="#"><img src="img/女裤.jpg" width="200" height="253px" /></a></li>
            <li><a href="#"><img src="img/羽绒服.jpg" width="200" height="253px" /></a></li>
            <li><a href="#"><img src="img/牛仔裤.jpg" width="200" height="253px" /></a></li>
            <li><a href="#"><img src="img/女靴.jpg" width="200" height="253px" /></a></li>
            <li><a href="#"><img src="img/雪地靴.jpg" width="200" height="253px" /></a></li>
            <li><a href="#"><img src="img/冬裙.jpg" width="200" height="253px" /></a></li>
            <li><a href="#"><img src="img/呢大衣.jpg" width="200" height="253px" /></a></li>
            <li><a href="#"><img src="img/毛衣.jpg" width="200" height="253px" /></a></li>
            <li><a href="#"><img src="img/棉服.jpg" width="200" height="253px" /></a></li>
            <li><a href="#"><img src="img/女裤.jpg" width="200" height="253px" /></a></li>
            <li><a href="#"><img src="img/羽绒服.jpg" width="200" height="253px" /></a></li>
            <li><a href="#"><img src="img/牛仔裤.jpg" width="200" height="253px" /></a></li>
        </ul>
        <ul id="right">
            <li><a href="#">女靴</a></li>
            <li><a href="#">雪地靴</a></li>
            <li><a href="#">冬裙</a></li>
            <li><a href="#">呢大衣</a></li>
            <li><a href="#">毛衣</a></li>
            <li><a href="#">棉服</a></li>
            <li><a href="#">女裤</a></li>
            <li><a href="#">羽绒服</a></li>
            <li><a href="#">牛仔裤</a></li>
        </ul>
    </div>
    

    <script src="../jquery-3.2.1.js"></script>
    <script>
        
        $(function(){
            $("#left>li").mouseenter(function(){
                // 让center中对应下标的li显示  其他的兄弟元素隐藏
                var idx = $(this).index();  // 当前下标
                $("#center>li:eq("+idx+")").show().siblings().hide();
            });
            $("#right>li").mouseenter(function(){
                var idx = $(this).index() + 9;  // 右边要+9
                $("#center>li").eq(idx).show().siblings().hide();
            });
        })

    </script>
</body>
</html>